<!-- 任务详情 -->
<template>
  <div class="task-detail">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>

    <div class="task-list">
      <!-- 任务详情List -->
      <van-cell-group>
        <van-cell title="客户单位:"
                  :value="serList.cust_name" />
        <van-cell title="合同名称:"
                  :value="serList.pact_name" />
        <van-cell title="联系人:"
                  :value="serList.linkManName" />
        <van-cell title="派单人:"
                  :value="serList.deliverMan" />
        <van-cell title="联系电话:"
                  :value="serList.phone" />
        <van-cell title="客户地址:"
                  :value="serList.address" />
        <van-cell title="办公地点:"
                  :value="serList.tasksAddress" />
        <van-cell title="软件版本:"
                  :value="serList.version" />
        <van-cell title="优先级:"
                  :value="serList.priority" />
        <van-cell title="服务类型:"
                  :value="serList.type" />
        <van-cell title="上门日期:"
                  :value="serList.svr_date" />
        <van-cell title="上门时间:"
                  :value="serList.svr_time" />
        <van-cell title="预算时长:"
                  :value="serList.lengthTime" />
        <van-cell title="时限:"
                  :value="serList.deadline" />
        <van-cell title="难度系数:"
                  :value="serList.degreeDifficulty" />
        <van-cell title="服务内容:"
                  :value="serList.request" />
        <van-cell title="处理方法及处理结果:"
                  :value="serList.handlingMethod"
                  v-if="!isHistory" />
        <van-cell title="完成状态:"
                  :value="serList.tasksState"
                  v-if="isHistory" />
        <van-cell title="处理方法及处理结果:"
                  :value="serList.result"
                  v-if="isHistory" />
      </van-cell-group>
      <div class="task-btn"
           v-if="!isHistory">
        <van-button type="info"
                    size="small"
                    plain
                    color="burlywood"
                    style="margin-right: 10px;"
                    @click="onCancel">取消任务</van-button>
        <van-button type="info"
                    size="small"
                    color="burlywood"
                    @click="onAssign"
                    v-if="isAssign">领取任务</van-button>
        <van-button type="info"
                    size="small"
                    color="burlywood"
                    style="margin-right: 10px;"
                    @click="onEdit"
                    v-if="!isAssign">修改任务</van-button>
        <van-button :loading="isLoading1"
                    type="info"
                    size="small"
                    color="burlywood"
                    @click="onPrint"
                    v-if="!isAssign">套打</van-button>
        <van-button :loading="isLoading2"
                    type="info"
                    size="small"
                    color="burlywood"
                    style="margin: 0 10px;"
                    @click="onPrintTask"
                    v-if="!isAssign">打印</van-button>
      </div>
      <div class="task-btn"
           v-else>
        <van-button :loading="isLoading1"
                    type="info"
                    size="small"
                    color="burlywood"
                    @click="onPrint">套打</van-button>
        <van-button :loading="isLoading2"
                    type="info"
                    size="small"
                    color="burlywood"
                    style="margin: 0 10px;"
                    @click="onPrintTask">打印</van-button>
        <van-button type="info"
                    size="small"
                    color="burlywood"
                    @click="onCost"
                    v-if="this.costState === 0">交通费</van-button>
        <van-button type="info"
                    size="small"
                    color="burlywood"
                    @click="getCost"
                    v-else>查看交通费</van-button>
      </div>
    </div>

    <!-- 取消弹出层 -->
    <van-popup v-model="showCancel"
               position="bottom">
      <van-field v-model="remake"
                 label="备注:"
                 name="info"
                 type="textarea"
                 :autosize="{ maxHeight: 200,minHeight: 200 }" />
      <div class="cancel-btn">
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="onSubmit1">提交</van-button>
      </div>
    </van-popup>
    <!-- 修改弹出层 -->
    <van-popup v-model="showEdit"
               position="bottom"
               :style="{ height: '80%' }">
      <van-field readonly
                 clickable
                 name="priority"
                 :value="editList.priority"
                 label="优先级:"
                 placeholder="点击选择优先级"
                 @click="showPicker = true" />
      <van-field readonly
                 clickable
                 name="sDate"
                 :value="editList.sDate"
                 label="上门日期"
                 placeholder="点击选择日期"
                 @click="showCalendar = true" />
      <van-field readonly
                 clickable
                 name="sTime"
                 :value="editList.sTime"
                 label="上门时间"
                 placeholder="点击选择时间"
                 @click="showTimePicker = true" />
      <van-field v-model="editList.phone"
                 label="联系电话:"
                 name="phone" />
      <van-field v-model="editList.address"
                 label="客户地址:"
                 name="address" />
      <van-field v-model="editList.version"
                 label="软件版本:"
                 name="version" />
      <van-field v-model="editList.lengthTime"
                 type="digit"
                 label="预算时长:"
                 name="lengthTime" />
      <van-field v-model="editList.deadline"
                 type="digit"
                 label="时限:"
                 name="deadline" />
      <van-field label="难度系数:"
                 name="degreeDifficulty">
        <template #input>
          <van-stepper v-model="editList.degreeDifficulty"
                       theme="round"
                       button-size="22" />
        </template>
      </van-field>
      <van-field v-model="editList.info"
                 label="服务内容:"
                 name="info"
                 type="textarea"
                 maxlength="50"
                 show-word-limit />
      <van-field v-model="editList.handlingMethod"
                 label="处理方法及处理结果:"
                 name="handlingMethod"
                 type="textarea"
                 maxlength="100"
                 show-word-limit />
      <div class="edit-btn">
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="onSubmit2"
                    style="margin-right: 10px;">提交</van-button>
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="onReach"
                    v-if="showStatus">到达现场</van-button>
        <div v-else
             style="flex: 1;display: flex;">
          <van-button type="info"
                      size="small"
                      block
                      color="burlywood"
                      style="margin-right: 10px;"
                      @click="onComplete">完成</van-button>
          <van-button type="info"
                      size="small"
                      block
                      color="burlywood"
                      @click="unComplete">未完成</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 领取任务弹出层 -->
    <van-popup v-model="showAssign"
               position="bottom">
      <van-field readonly
                 clickable
                 :value="svr"
                 label="分配人员:"
                 name="svr"
                 placeholder="点击选择分配人员"
                 @click="openPeo" />
      <van-field readonly
                 clickable
                 name="sDate"
                 :value="sDate"
                 label="上门日期:"
                 placeholder="点击选择日期"
                 @click="showCalendar = true" />
      <van-field readonly
                 clickable
                 name="sTime"
                 :value="sTime"
                 label="上门时间:"
                 placeholder="点击选择时间"
                 @click="showTimePicker = true" />
      <div class="assign-btn">
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="onSubmit3">提交</van-button>
      </div>
    </van-popup>
    <!-- 添加费用弹出层 -->
    <van-popup v-model="showCost"
               position="bottom">
      <van-field readonly
                 clickable
                 name="costTypeName"
                 :value="costList.costTypeName"
                 label="费用类别:"
                 placeholder="点击选择费用类别"
                 @click="costPicker = true" />
      <van-field v-model="costList.costTotal"
                 type="digit"
                 label="金额:"
                 name="costTotal" />
      <van-field v-model="costList.costRemark"
                 label="备注:"
                 name="costRemark"
                 type="textarea"
                 maxlength="50"
                 show-word-limit />
      <div class="cost-btn">
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="onSubmit4">提交</van-button>
      </div>
    </van-popup>
    <!-- 查看交通费弹出层 -->
    <van-popup v-model="showList"
               position="bottom">
      <van-cell title="费用类别:"
                :value="costList.costTypeName"
                v-if="this.costList.result" />
      <van-field readonly
                 clickable
                 name="costTypeName"
                 :value="costList.costTypeName"
                 label="费用类别:"
                 input-align="right"
                 placeholder="点击选择费用类别"
                 @click="costPicker = true"
                 v-else />
      <van-cell title="金额:"
                :value="costList.costTotal"
                v-if="this.costList.result" />
      <van-field v-model="costList.costTotal"
                 type="digit"
                 input-align="right"
                 label="金额:"
                 name="costTotal"
                 v-else />
      <van-cell title="备注:"
                :value="costList.costRemark"
                v-if="this.costList.result" />
      <van-field v-model="costList.costRemark"
                 label="备注:"
                 name="costRemark"
                 input-align="right"
                 type="textarea"
                 maxlength="30"
                 show-word-limit
                 v-else />
      <div class="label">
        <van-steps :active="costList.CFA_State"
                   :active-icon="costList.result ? 'success' : 'cross'"
                   active-color="burlywood">
          <van-step>提交申请</van-step>
          <van-step>领导审核</van-step>
        </van-steps>
      </div>
      <van-cell title="领导意见:"
                :value="costList.depComment"
                v-if="costList.fressState === 3 || costList.fressState === 4 || costList.CFA_State === 2" />
      <div class="cost-btn">
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="showList = false"
                    v-if="this.costList.result">确定</van-button>
        <van-button type="info"
                    size="small"
                    block
                    color="burlywood"
                    @click="showMod"
                    v-else>修改</van-button>
      </div>
    </van-popup>
    <!-- 日期选择器 -->
    <van-calendar v-model="showCalendar"
                  @confirm="selectDate"
                  color="burlywood" />
    <!-- 时间选择器 -->
    <van-popup v-model="showTimePicker"
               position="bottom">
      <van-datetime-picker type="time"
                           @confirm="timeOnConfirm"
                           @cancel="showTimePicker = false" />
    </van-popup>
    <!-- 优先级选择器 -->
    <van-popup v-model="showPicker"
               position="bottom">
      <van-picker show-toolbar
                  :columns="columns"
                  @confirm="onConfirm"
                  @cancel="showPicker = false" />
    </van-popup>
    <!-- 分配人员选择器 -->
    <van-popup v-model="peoShowPicker"
               position="bottom">
      <van-picker show-toolbar
                  :columns="peoColumns"
                  @confirm="peoOnConfirm"
                  @cancel="peoShowPicker = false"
                  v-if="peoColumns.length > 0" />
      <van-empty description="暂无数据"
                 v-else />
    </van-popup>
    <!-- 费用类别选择器 -->
    <van-popup v-model="costPicker"
               position="bottom">
      <van-picker show-toolbar
                  :columns="costColumns"
                  @confirm="costOnConfirm"
                  @cancel="costPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { addMySer, getPeoList, updateState, getCostType, getCost, addCost, printSer, PrintSerTask, UpdateCost } from '@/request/api'
import dayjs from 'dayjs'
export default {
  name: 'TaskDetail',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      serList: {}, // 任务详情数据
      showCancel: false, // 取消任务弹出层显示状态
      showEdit: false, // 修改任务弹出层显示状态
      showAssign: false, // 领取任务弹出层显示状态
      showCost: false, // 添加费用弹出层显示状态
      showList: false, // 查看费用弹出层显示状态
      remake: '', // 取消任务备注
      editList: {
        priority: '',
        sDate: '',
        sTime: '',
        phone: '',
        address: '',
        version: '',
        lengthTime: '',
        deadline: '',
        degreeDifficulty: '',
        info: '',
        handlingMethod: ''
      },
      svr: '', // 分配人员
      sDate: '', // 分配日期
      sTime: '', // 分配时间
      isAssign: false,
      showCalendar: false, // 日期选择器显示状态
      showTimePicker: false, // 时间选择器显示状态
      showPicker: false, // 优先级选择器显示状态
      peoShowPicker: false, // 分配人员选择器显示状态
      peoColumns: [], // 分配人员选择器显示数据
      columns: ['紧急', '重要', '一般', '后置', '待定'], // 优先级选择器数据
      showStatus: false, // 显示状态
      isHistory: JSON.parse(sessionStorage.getItem('History_Status')),
      costList: {
        costTypeName: '',
        costType: '',
        costTotal: '',
        costRemark: '',
        fress_man: '',
        fressId: ''
      },
      costPicker: false, // 费用类别选择器显示状态
      costColumns: [], // 费用类别选择器显示数据
      costState: 0,
      isLoading1: false, // 套打按钮loading
      isLoading2: false // 打印按钮loading
    }
  },
  created () {
    this.serList = JSON.parse(sessionStorage.getItem('SER_LIST'))
    this.isAssign = JSON.parse(sessionStorage.getItem('SET_ASSIGN'))
    this.costState = this.serList.freesState
    if (this.serList.state === 1) {
      this.showStatus = false
    } else {
      this.showStatus = true
    }
    console.log(this.serList, this.isAssign)
  },
  methods: {
    // 取消任务
    onCancel () {
      this.showCancel = true
    },
    // 修改任务
    onEdit () {
      this.showEdit = true
      this.editList.priority = this.serList.priority
      this.editList.sDate = this.serList.svr_date
      this.editList.sTime = this.serList.svr_time
      this.editList.phone = this.serList.phone
      this.editList.address = this.serList.address
      this.editList.version = this.serList.version
      this.editList.lengthTime = this.serList.lengthTime
      this.editList.deadline = this.serList.deadline
      this.editList.degreeDifficulty = this.serList.degreeDifficulty
      this.editList.info = this.serList.request
      this.editList.handlingMethod = this.serList.handlingMethod
    },
    // 交通费填写
    onCost () {
      this.costColumns = []
      this.showCost = true
      getCostType().then(res => {
        console.log(res)
        if (res.msg === '数据加载成功') {
          this.costList.costTypeName = res.result.costType[0].typeName
          this.costList.costType = res.result.costType[0].typeId
          this.costColumns = res.result.costType.map(item => {
            return {
              text: item.typeName,
              value: item.typeId
            }
          })
        }
      })
    },
    // 查看交通费
    getCost () {
      this.showList = true
      const param = {
        serviceId: this.serList.svrId,
        custId: this.serList.custId
      }
      getCost(param).then(res => {
        console.log(res)
        if (res.msg === '数据加载成功') {
          this.costList = res.result.cost[0]
          console.log(this.costList)
        }
      })
      getCostType().then(res => {
        console.log(res)
        if (res.msg === '数据加载成功') {
          this.costList.costTypeName = res.result.costType[0].typeName
          this.costList.costType = res.result.costType[0].typeId
          this.costColumns = res.result.costType.map(item => {
            return {
              text: item.typeName,
              value: item.typeId
            }
          })
        }
      })
    },
    // 日期选择器
    selectDate (date) {
      this.showCalendar = false
      this.editList.sDate = dayjs(date).format('YYYY-MM-DD')
      this.sDate = dayjs(date).format('YYYY-MM-DD')
    },
    // 时间选择器
    timeOnConfirm (time) {
      this.showTimePicker = false
      this.sTime = time
      this.editList.sTime = time
    },
    // 优先级选择器
    onConfirm (value) {
      if (value) {
        this.editList.priority = value
        this.showPicker = false
      } else {
        this.showPicker = false
      }
    },
    // 分配任务
    onAssign () {
      console.log(this.serList)
      this.showAssign = true
      this.svrMan = sessionStorage.getItem('userId')
      this.svr = sessionStorage.getItem('userName')
      this.sDate = this.serList.svr_date
      this.sTime = this.serList.svr_time
    },
    // 选择分配人员
    openPeo () {
      this.peoColumns = []
      this.peoShowPicker = true
      const param = { 'stype': 'skills', page: 0, pageCount: 100 }
      getPeoList(param).then(res => {
        console.log(res)
        if (res.msg === '数据加载成功') {
          this.peoColumns = res.result.peo.map(item => {
            return {
              text: item.Source_Name,
              value: item.Source_Id
            }
          })
        }
      })
    },
    // 分配人员选择器
    peoOnConfirm (value) {
      if (value) {
        this.svr = value.text
        this.svrMan = value.value
        this.peoShowPicker = false
      }
    },
    // 费用类别选择器
    costOnConfirm (value) {
      if (value) {
        this.costList.costTypeName = value.text
        this.costList.costType = value.value
        this.costPicker = false
      } else {
        this.costPicker = false
      }
    },
    // 取消任务提交事件
    onSubmit1 () {
      if (this.remake) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要取消此条任务吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          if (this.isAssign) {
            const param = { svrId: this.serList.svrId, type: '', remake: this.remake }
            console.log(param)
            addMySer(param).then(res => {
              console.log(res)
              if (res.msg === '取消成功') {
                this.$router.push({ path: '/taskAssign' })
              } else {
                this.$toast.fail('取消失败')
              }
            })
          } else {
            const param = { svrId: this.serList.svrId, type: 'CancelSer', remake: this.remake }
            console.log(param)
            addMySer(param).then(res => {
              console.log(res)
              if (res.msg === '取消任务成功') {
                this.$router.push({ path: '/myTask' })
              } else {
                this.$toast.fail('取消任务失败')
              }
            })
          }
        }).catch(() => { })
      } else {
        this.$dialog.alert({
          message: '备注内容必填',
          confirmButtonColor: 'burlywood'
        })
      }
    },
    // 修改任务提交事件
    onSubmit2 () {
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要修改此条任务吗?',
        confirmButtonColor: 'burlywood'
      }).then(() => {
        this.editList.svrId = this.serList.svrId
        this.editList.type = 'Update'
        console.log(this.editList)
        addMySer(this.editList).then(res => {
          console.log(res)
          if (res.msg === '修改成功') {
            this.$router.push({ path: '/myTask' })
          } else {
            this.$toast.fail('修改失败')
          }
        })
      }).catch(() => { })
    },
    // 领取任务提交事件
    onSubmit3 () {
      if (this.svrMan && this.sDate && this.sTime) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要领取此条任务吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          const param = {
            staffId: sessionStorage.getItem('userId'),
            svrMan: this.svrMan,
            svrId: this.serList.svrId,
            sDate: this.sDate,
            sTime: this.sTime,
            type: 'Deliver'
          }
          addMySer(param).then(res => {
            if (res.msg === '分配成功') {
              this.$router.push({ path: '/myTask' })
            } else {
              this.$toast.fail('分配失败')
            }
          })
        }).catch(() => { })
      } else {
        this.$dialog.alert({
          message: '请选择分配人员，日期，时间',
          confirmButtonColor: 'burlywood'
        })
      }
    },
    // 添加费用提交事件
    onSubmit4 () {
      if (this.costList.costTotal && this.costList.costTotal) {
        this.costList.serviceId = this.serList.svrId
        this.costList.custId = this.serList.custId
        this.costList.fress_man = sessionStorage.getItem('userId')
        delete this.costList.costTypeName
        console.log(this.costList)
        addCost(this.costList).then(res => {
          console.log(res)
          if (res.msg === '添加服务费用成功') {
            this.serList.freesState = true
            sessionStorage.setItem('SER_LIST', JSON.stringify(this.serList))
            this.costState = true
            this.showCost = false
            this.$toast.success('添加成功')
          }
        })
      } else {
        this.$dialog.alert({
          message: '请选择费用类别，金额',
          confirmButtonColor: 'burlywood'
        })
      }
    },
    // 到达现场
    onReach () {
      console.log('到达现场')
      this.$dialog.confirm({
        title: '提示',
        message: '您确定要到达现场吗?',
        confirmButtonColor: 'burlywood'

      }).then(() => {
        const param = {
          staffId: sessionStorage.getItem('userId'),
          svrId: this.serList.svrId,
          state: 1
        }
        updateState(param).then(res => {
          console.log(res)
          if (res.msg === '修改成功') {
            this.showStatus = false
            this.serList.state = 1
            sessionStorage.setItem('SER_LIST', JSON.stringify(this.serList))
          }
        })
      }).catch(() => { })
    },
    // 完成任务
    onComplete () {
      if (this.editList.handlingMethod) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要完成任务吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          const param = {
            result: this.editList.handlingMethod,
            staffId: sessionStorage.getItem('userId'),
            svrId: this.serList.svrId,
            state: 2
          }
          console.log(param)
          updateState(param).then(res => {
            console.log(res)
            if (res.msg === '修改成功') {
              this.$router.push({ path: '/myTask' })
            }
          })
        }).catch(() => { })
      } else {
        this.$dialog.alert({
          message: '请先填写处理方法及处理结果',
          confirmButtonColor: 'burlywood'
        })
      }
    },
    // 未完成任务
    unComplete () {
      if (this.editList.handlingMethod) {
        this.$dialog.confirm({
          title: '提示',
          message: '您确定要未完成任务吗?',
          confirmButtonColor: 'burlywood'
        }).then(() => {
          const param = {
            result: this.editList.handlingMethod,
            staffId: sessionStorage.getItem('userId'),
            svrId: this.serList.svrId,
            state: 3
          }
          console.log(param)
          updateState(param).then(res => {
            console.log(res)
            if (res.msg === '修改成功') {
              this.$router.push({ path: '/myTask' })
            }
          })
        }).catch(() => { })
      } else {
        this.$dialog.alert({
          message: '请先填写处理方法及处理结果',
          confirmButtonColor: 'burlywood'
        })
      }
    },
    // 套打
    onPrint () {
      this.isLoading1 = true
      const param = {
        serviceId: this.serList.svrId
      }
      printSer(param).then(res => {
        if (res.msg === '打印成功') {
          this.isLoading1 = false
        }
      })
    },
    onPrintTask () {
      this.isLoading2 = true
      const param = {
        serviceId: this.serList.svrId
      }
      PrintSerTask(param).then(res => {
        if (res.msg === '打印成功') {
          this.isLoading2 = false
        }
      })
    },
    // 部门审核意见事件
    depResult () {
      console.log('部门审核')
      document.getElementsByClassName('depComment').style = 'display:block'
    },
    // 公司审核意见事件
    comResult () {
      console.log('公司审核')
      document.getElementsByClassName('depComment').style = 'display:none'
      document.getElementsByClassName('comComment').style = 'display:block'
    },
    // 财务审核意见事件
    finResult () {
      console.log('财务审核')
      document.getElementsByClassName('depComment').style = 'display:none'
      document.getElementsByClassName('comComment').style = 'display:none'
      document.getElementsByClassName('finComment').style = 'display:block'
    },
    // 未通过时,点击修改按钮触发事件
    showMod () {
      console.log('未通过')
      if (this.costList.costTypeName && this.costList.costType && this.costList.costRemark) {
        const param = {
          fressId: this.costList.fressId,
          costRemark: this.costList.costRemark,
          costTotal: this.costList.costTotal
        }
        console.log(param)
        UpdateCost(param).then(res => {
          console.log(res)
          if (res.Tag === 1) {
            this.$toast.success('修改成功')
            this.$router.push({ path: '/PastTask' })
          }
        })
      } else {
        this.$dialog.alert({
          message: '请填写费用金额，备注',
          confirmButtonColor: 'burlywood'
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.task-detail {
  width: 100%;
  height: 100%;
  .task-list {
    height: calc(100% - 1.2rem);
    overflow-y: auto;
    overflow-x: hidden;
    .van-cell-group {
      &::after {
        border: none;
      }
      .van-cell {
        .van-cell__value {
          flex: 2;
          text-align: left;
        }
      }
    }
    .task-btn {
      margin: 0.4rem;
      display: flex;
      .van-button {
        width: 50%;
      }
    }
  }
  .van-popup {
    .cancel-btn,
    .assign-btn,
    .complete-btn,
    .cost-btn {
      margin: 0.4rem;
    }
    .cost-btn {
      display: flex;
      justify-content: space-around;
      .van-button {
        width: 90%;
      }
    }
    .edit-btn {
      margin: 0.4rem;
      display: flex;
      .van-button {
        width: 50%;
      }
    }
    /deep/ .van-cell {
      .van-stepper--round {
        .van-stepper__minus {
          color: burlywood;
          border-color: burlywood;
        }
        .van-stepper__plus {
          background-color: burlywood;
        }
      }
    }
    .label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      .van-button {
        border: none;
      }
    }
  }
}
.display {
  display: none;
}
</style>
